<template>

  <header class="banner-body">

    <!--当有轮播图数据时展示-->
    <section v-if="banners.length > 0">

      <!--轮播图组件: 3秒钟自动轮播一次，指示器颜色-->
      <van-swipe :autoplay="3000" indicator-color="orange">

        <!--轮播图组件item项: 遍历轮播图数据-->
        <van-swipe-item v-for="banner in banners" :key="banner['bannerId']">
          <!--展示图片: 计算MinIO代理地址-->
          <van-image :src="minio(banner['bannerUrl'])"/>
        </van-swipe-item>
      </van-swipe>
    </section>

    <!--当没有轮播图数据时展示-->
    <section v-else>
      <!--静态图片: 展示本地资源时必须使用 require() 函数-->
      <van-image :src="require('@/assets/无图.png')"/>
    </section>

  </header>

</template>

<script setup>

import {computed, onMounted, shallowRef} from "vue";
import {TOP} from "@/api/banner";
import {MINIO_HOST, SUCCESS} from "@/constant";
import {showFailToast} from "vant";

/* ==================== data ==================== */

// data: 轮播图数据列表
let banners = shallowRef([]);

/* ==================== computed ==================== */

// computed: 计算MinIO的代理地址，计算属性接收参数需要闭包
let minio = computed(() => src => MINIO_HOST + '/banner/' + src);

/* ==================== method ==================== */

// method: 异步查询5张轮播图记录
async function list(size) {
  let result = await TOP(size);
  let resp = result['data'];
  if (resp.code === SUCCESS) {
    banners.value = resp.data;
  } else showFailToast(resp.message + ': ' + resp.data)
}

/* ==================== mounted ==================== */

// mounted: DOM挂载后，查询5张轮播图记录
onMounted(() => list(5));

</script>

<style scoped>

</style>